<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型案例2</title>
	</head>
	<style>
		/* 上半部分 */
		 #comment{
			 width: 900px;
			 height: 100px;
			 border: 1px solid #bababa;
		 }
		 #line{
			 width: 880px;
			 border: 1px solid #c2c2c2;
			 /* 盒子自适应居中 */
			 margin: 0 auto;
			 margin-top: 20px;
		 }
		 /* 下半部分 */
		 #pages{
			 width: 900px;
			 margin-top: 10px;
		 }
		 #pages a{  /*加外边框，内边距*/
			 border: 1px solid #dddddd;
			 padding: 4px 10px;
			 border-radius: 5px;
			 margin-right: 5px;
		 }
		 #pages a.current{
			 border: 0;
			 text-decoration: none;
			 color: #000;
		 }
		 /* 抓到精灵图：三星 显示元素*/
		 div#comment i{
			display: block;  /*行转块--设置宽高*/
			height: 17px;
			width: 75px;
			pad ding: 0 38px;/*不能为负数*/
			background-image: url(img/星星.jpg);
			background-position: -138px -237px;
			
			
			
			
		 }
		 
	</style>
	<body>
		
		<!-- 思路 html 结构 -->
		<div id="comment">
			<!-- 精灵图：将小图标导出1张矢量图【png】好处 -->
			<i></i>
			<div id="line"></div>
		</div>
		<div id="pages">
			<a href="#" class="current">1</a>
			<a href="#">2</a>
			<a href="#">3</a>
			<a href="#">4</a>
			<a href="#">5</a>
			<a href="#">6</a></div>

	</body>
</html>